import { genCharByAiUsingPost } from '@/services/qingbi/chartController';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Card, Col, Form, Input, message, Row, Select, Space, Spin, Upload } from 'antd';
import ReactECharts from 'echarts-for-react';
import React, { useState } from 'react';
/**
 * 添加图表页面
 * @constructor
 */
const AddChart: React.FC = () => {
  const [submitting, setSubmitting] = React.useState<boolean>(false);
  const [chart, setChart] = useState<API.BiResponse>();
  const [option, setOption] = React.useState<any>();
  // const [chart,setChart] =userState<API.Bi
  // const options = {
  //   grid: { top: 8, right: 8, bottom: 24, left: 36 },
  //   xAxis: {
  //     type: 'category',
  //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  //   },
  //   yAxis: {
  //     type: 'value',
  //   },
  //   series: [
  //     {
  //       data: [820, 932, 901, 934, 1290, 1330, 1320],
  //       type: 'line',
  //       smooth: true,
  //     },
  //   ],
  //   tooltip: {
  //     trigger: 'axis',
  //   },
  // };
  const onFinish = async (values: any) => {
    console.log('表单输入: ', values);
    if (submitting) return;
    setSubmitting(true);
    setChart(undefined);
    setOption(undefined);
    const param = {
      ...values,
      file: undefined,
    };
    try {
      // 需要取到上传的原始数据file→file→originFileObj(原始数据)
      const res = await genCharByAiUsingPost(param, {}, values.file.file.originFileObj);
      // 正常情况下，如果没有返回值就分析失败，有，就分析成功
      if (!res?.data) {
        message.error('分析失败');
      } else {
        message.success('分析成功');
        const chartOption = JSON.parse(res?.data.genChart ?? '');
        if (!chartOption) {
          throw new Error('图表代码解析错误');
        } else {
          setChart(res.data);
          setOption(chartOption);
        }
      }
    } catch (e: any) {
      // 异常情况下，提示分析失败+具体失败原因
      message.error('分析失败' + e.message);
    }
    setSubmitting(false);
    // setChartData(options.);
  };

  return (
    <div className="add-chart">
      <Row gutter={24}>
        <Col span={12}>
          <Card title="智能分析">
            <Form
              name="addChart"
              onFinish={onFinish} // 初始化数据啥都不填，为空
              initialValues={{}}
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 16 }}
              labelAlign="left"
              style={{ maxWidth: 600 }}
            >
              <Form.Item label="智能">
                <span className="ant-form-text">图表分析</span>
              </Form.Item>
              <Form.Item name="chartType" label="图表类型" hasFeedback>
                <Select
                  options={[
                    { value: '折线图', label: '折线图' },
                    { value: '柱状图', label: '柱状图' },
                    { value: '堆叠图', label: '堆叠图' },
                    { value: '饼图', label: '饼图' },
                    { value: '雷达图', label: '雷达图' },
                  ]}
                />
              </Form.Item>
              <Form.Item name="aiType" label="模型类型" hasFeedback>
                <Select
                  options={[
                    { value: 'DeepSeek', label: 'DeepSeek' },
                    { value: '星火模型', label: '星火模型' },
                  ]}
                />
              </Form.Item>
              <Form.Item
                name="goal"
                label="图表需求:"
                rules={[
                  {
                    type: 'string',
                    message: '请输入你的分析需求！',
                  },
                  {
                    required: true,
                    message: '请输入你的分析需求！',
                  },
                ]}
              >
                <Input />
              </Form.Item>
              {/* 还要输入图表名称 */}
              <Form.Item
                name="name"
                label="图表名称"
                rules={[
                  {
                    type: 'string',
                    message: '请输入你的图表名称！',
                  },
                  {
                    required: true,
                    message: '请输入你的图表名称！',
                  },
                ]}
              >
                <Input placeholder="请输入图表名称" />
              </Form.Item>

              <Form.Item name="file" label="原始数据">
                {/* action:当你把文件上传之后，他会把文件上传至哪个接口。
      这里肯定是调用自己的后端，先不用这个 */}
                <Upload name="file">
                  <Button icon={<UploadOutlined />}>点击CSV上传</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                <Space>
                  <Button type="primary" htmlType="submit">
                    智能分析
                  </Button>
                  <Button htmlType="reset">清空</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        {/*<div>分析结论：{chartData?.genResult}</div>*/}
        <Col span={12}>
          <Card title="分析结论">
            {chart?.genResult ?? <div>请先在左侧进行提交</div>}
            <Spin spinning={submitting} />
          </Card>
          {/*<div>*/}
          <Card title="分析图表">
            {option ? <ReactECharts option={option} /> : <div>请先在左侧进行提交</div>}
            <Spin spinning={submitting} />
          </Card>
          {/*<ReactECharts option={options} />*/}
          {/*分析图表：{analysis?.genChart}*/}
          {/*</div>*/}
        </Col>
      </Row>
    </div>
  );
};

export default AddChart;
